<template>
  <div class="activity">
    <div class="activity-top">
      <div class="activity-top-left">
        <picker mode="region" @change="bindRegionChange" value="region" class="picker">
          <div class="region-content">{{region[0] + region[1]}}<i class="icon-iconfont-platform-entrance"></i></div>
        </picker>
         <picker mode="date" value="date" start="1990-09-01" end="endDate" @change="bindDateChange">
           <div class="date-content">{{selectDate}}<i class="icon-iconfont-platform-entrance"></i></div>
        </picker>
      </div>
      <div class="activity-top-right" @click="searchBtn"></div>
    </div>
    <div class="holdActivity" @click="toHoldActivity" v-if="userInfo.is_active_party">发布活动</div>
    <ActivityList v-for="(item,index) in activityList" :key="index" :dataList="item" :itemIndex="index" :callback="navigateToDetail" :keepCallback="keep"/>
  </div>
</template>

<script>
import ActivityList from "../../components/activityList.vue";
import { formatDate } from "../../utils/format.js"
import {mapState} from 'vuex';
import { 
  getActivityList,
  postActivityKeep,
  postCancelActivityKeep
} from '../../api/index.js'

export default {
  data() {
    return {
      selectDate: '',
      date: '', //组件选中的时间查询用
      endDate: '', //设置组件可选的最大时间
      region: ["广东", "广州"],
      activityList: [],
      limit: 8,
      page: 0,
      reachBottomFlag: true, // 没有数据了不再发送请求
      address:["广东省", "广州市", "天河区"], //组件选中的地址查询用
      selcetType: 0, //判断分页数据类型
    };
  },
  computed: {
    ...mapState(['userInfo'])
  },
  onShow(){
    this.fliterDate();
    this.reqActivityList();
  },
  //下拉刷新
  onPullDownRefresh () {
    this.page= 0;
    this.selcetType = 0;
    this.reachBottomFlag = true;
    this.reqActivityList();
  },
  //上拉加载
  onReachBottom () {
    if(this.selcetType == 0){
      if(this.reachBottomFlag){
        this.page++;
        this.reqActivityList();
      }
    }else if(this.selcetType == 1){
      if(this.reachBottomFlag){
        this.page++;
        this.reqSearchActivityList();
      }
    }
  },
  components: {
    ActivityList
  },
  methods: {
    //点击地区组件
    bindRegionChange(e) {
      this.address = e.mp.detail.value;
      let addressArr = [];
      if(this.address[0] == this.address[1]){
        addressArr.push(this.address[0].replace(/市|省|自治区|壮族自治区|回族自治区|维吾尔族自治区|特别行政区/,""));
      }else{
        addressArr.push(this.address[0].replace(/市|省|自治区|壮族自治区|回族自治区|维吾尔族自治区|特别行政区/,""));
        addressArr.push(this.address[1].replace(/市/,""));
      }
      this.region = addressArr;
    },
    //点击时间组件获得选择的时间
    bindDateChange(e){
      this.date = e.mp.detail.value.split("-");
      this.selectDate = e.mp.detail.value.split("-").join("/");
    },
    //初始化时间
    fliterDate(){
      let now = new Date();
      this.selectDate = formatDate(now).split("-").join("/");
      this.endDate = formatDate(now);
      this.date = formatDate(now).split("-");
    },
    //搜索按钮
    searchBtn(){
     this.limit = 8;
     this.page = 0;
     this.selcetType = 1;
     this.reqSearchActivityList();
    },
    //获取进行地区和时间筛选
    async reqSearchActivityList(){
      let params = {
        today_y: this.date[0],
        today_m: this.date[1],
        today_d: this.date[2],
        province: this.address[0],
        city: this.address[1],
        area: this.address[2],
        limit:this.limit,
        page:this.page
      };
      let res = await getActivityList(params);
      if(res.data.level == "success"){
        let data = res.data.activities;
        if(data.length == 0){
          this.reachBottomFlag = false;
          wx.showToast({
            title: '无符合数据',
            icon: 'error',
            duration: 1000
          })
        }else{
          if(params.page== 0){
           this.activityList = data;
          }else{
            this.activityList = this.activityList.concat(data);
          }
        }
      }else{
        wx.showToast({
          title: '获取活动列表失败',
          icon: 'error',
          duration: 1000
        })
      }
    },
    //获取所有活动数据
    async reqActivityList(){
      var userToken = wx.getStorageSync('userToken');
      let params = {
        limit:this.limit,
        page:this.page,
        user_token: userToken
      };
      let res = await getActivityList(params);
      if(res.data.level == "success"){
        let data = res.data.activities;
        wx.stopPullDownRefresh()
        if(data.length == 0){
          this.reachBottomFlag = false;
        }else{
          if(params.page== 0){
           this.activityList = data;
          }else{
            this.activityList = this.activityList.concat(data);
          }
        }
      }else{
        wx.showToast({
          title: '获取活动列表失败',
          icon: 'error',
          duration: 1000
        })
      }
    },
    //跳转到对应活动详情
    navigateToDetail(activityInfo){
      wx.navigateTo({
        url: '/pages/detail/main?id='+activityInfo.id
      })
    },
    //点击收藏按钮
    keep(activity, index){
      if(activity.is_collection == 2){
        this.reqKeep(activity, index)
      }else{
        this.reqCancelKeep(activity, index)
      }
    },
    //发送收藏请求
    async reqKeep(activity,index){
      var userToken = wx.getStorageSync('userToken');
      let parmas = {
        user_token: userToken,
        activity_id: activity.id
      }
      let res = await postActivityKeep(parmas);
      if(res.data.level == "success"){
        this.activityList[index].is_collection = 1;
        wx.showToast({
          title: '收藏成功',
          icon: 'none',
          duration: 1000
        })
      }else{
        wx.showToast({
          title: '收藏失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //发送取消收藏请求
    async reqCancelKeep(activity,index){
      var userToken = wx.getStorageSync('userToken');
      let parmas = {
        user_token: userToken,
        activity_id: activity.id
      }
      let res = await postCancelActivityKeep(parmas);
      if(res.data.level == "success"){
        this.activityList[index].is_collection = 2;
        wx.showToast({
          title: '取消收藏成功',
          icon: 'none',
          duration: 1000
        })
      }else{
        wx.showToast({
          title: '取消收藏失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    toHoldActivity(){
      wx.navigateTo({
        url:'/pages/holdActivity/main'
      })
    },
  }
};
</script>

<style lang="stylus" scoped>
  .activity
    width 100%
    background-color #f5f5f5
  .activity-top
    width 100%
    height 60rpx
    line-height 60rpx
    background-color #fff
    padding 0 20rpx
    font-size 14px
    display flex
    justify-content space-between
    align-items center
    margin-bottom 20rpx
    .icon-iconfont-platform-entrance
      display inline-block
      margin-left -8rpx
    .activity-top-left
      display flex
      align-items center
      color #333
      .picker
        margin-right 20rpx
    .activity-top-right
      width 50rpx
      height 50rpx
      background-image url(../../../static/images/magnifier.png)
      background-position center center
      background-size 50rpx 50rpx
</style>
<style lang="scss" scoped>
  .holdActivity{
    background: rgb(236, 134, 134);
    color:#fff;
    text-align: center;
    margin-left: 40px;
    padding:10px;
    border-radius: 10px;
    margin-bottom: 10px;
    width: calc(100% - 80px);
  }
</style>
